<template>
    <div class="container--item__box" v-lazy>
      <div class="container--item__Journalism animated zoomIn" v-for="(item, index) in arr" :key="index"  >
        <a :href="item.url" class="container--item__text" @click="skip">{{item.title}}</a>
        <img v-if="item.thumbnail_pic_s" v-lazy = "item.thumbnail_pic_s" alt="#" class="container--item__img">
        <img v-if="item.thumbnail_pic_s02" v-lazy = "item.thumbnail_pic_s02" alt="#" class="container--item__img cen">
        <img v-if="item.thumbnail_pic_s03" v-lazy = "item.thumbnail_pic_s03" alt="#" class="container--item__img"><br>
        <span class="container--text__degree">热</span>
        <span class="container--item__Company">{{item.author_name}}</span>
        <span class="container--item__time">{{timeDifference(item.date)}}</span>
      </div>
    </div>
</template>

<script>
export default {
  name: 'society',
  data () {
    return {
      arr: []
    }
  },
  methods: {
    skip (item) {
      window.location = item
    },
    timeDifference (tmpTime) {
      /* eslint-disable*/
      var mm = 1000;//1000毫秒 代表1秒
      var minute = mm * 60;
      var hour = minute * 60;
      var day = hour * 24;
      var month = day * 30;
      var ansTimeDifference=0;//记录时间差
      var tmpTimeStamp = tmpTime ? Date.parse(tmpTime.replace(/-/gi, "/")) : new Date().getTime();//将 yyyy-mm-dd H:m:s 进行正则匹配
      var nowTime = new Date().getTime();//获取当前时间戳
      var tmpTimeDifference = nowTime - tmpTimeStamp;//计算当前与需要计算的时间的时间戳的差值
      if (tmpTimeDifference < 0) {                //时间超出，不能计算
        alert("开始日期大于结束日期，计算失败！");
        return 0;
      }
      /**
       * 通过最开始强调的各个时间段用毫秒表示的数值，进行时间上的取整，为0的话，则没有到达
       * */
      var DifferebceMonth = tmpTimeDifference / month;    //进行月份取整
      var DifferebceWeek = tmpTimeDifference / (7 * day);//进行周取整
      var DifferebceDay = tmpTimeDifference / day;//进行天取整
      var DifferebceHour = tmpTimeDifference / hour;//进行小时取整
      var DifferebceMinute = tmpTimeDifference / minute;//进行分钟取整
      if (DifferebceMonth >= 1) {
        return tmpTime;                 //大于一个月 直接返回时间
      } else if (DifferebceWeek >= 1) {
        ansTimeDifference= parseInt(DifferebceWeek) + "个星期前";
      } else if (DifferebceDay >= 1) {
        ansTimeDifference = parseInt(DifferebceDay) + "天前";
      } else if (DifferebceHour >= 1) {
        ansTimeDifference = parseInt(DifferebceHour) + "个小时前";
      } else if (DifferebceMinute >= 1) {
        ansTimeDifference = parseInt(DifferebceMinute) + "分钟前";
      } else {
        ansTimeDifference = "刚刚";
      }
      return ansTimeDifference;
    }
  },
  mounted () {
    this.$bus.$on('val', (data) => {
      for (let i = 0; i < data.length; i++) {
        this.arr.push(data[i])
      }
    })
    this.$bus.$on('top', (data) => {
      this.arr = null
      this.arr = data
    })
  },
  created () {
    this.$http.get('http://localhost:81/data', { params: { key: 'bab4507ad018f2d4eadd583ffa32ce64', type: 'top' } })
      .then((data) => {
        let datas = JSON.parse(data.data.body).result.data
        // this.$route.params.data = datas
        this.arr = datas
      }).catch((e) => {
      console.log(e)
    })
  }
}
</script>

<style lang="scss" scoped>
  *{
    margin: 0;
    padding: 0;
    font-size: 0;
  }
  .header{
    width: 100vw;
    height: .8rem;
    background: red;
    position: absolute;
    left: 0;
    top: 0;
  }
  .container--item__Journalism{
    position: relative;
    border-bottom: 1px solid #e0e0e0;
    padding-top: .4rem;
    width: 100vw;
    .container--item__text{
      width: 92.26666667vw;
      display: inline-block;
      font-size: .453333333rem;
      position: relative;
      left: .4266666667rem;
      right: .4266666667rem;
      margin-bottom: .29333rem;
      text-decoration: none;
      color: #151515;
    }
    .container--item__img{
      position: relative;
      left: .4266666667rem;
      right: .4266666667rem;
      width: 2.93rem;
      height: 2.32rem;
      border-radius: 5px;
    }
    .cen{
      margin: 0 .0933333333333rem;
    }
    .container--text__degree{
      display: inline-block;
      font-size: .4rem;
      width: .4rem;
      line-height: .4rem;
      color: #e67b7c;
      border: 1px solid #db4a4a;
      text-align: center;
      margin-top: .29333rem;
      margin-bottom: .333333333rem;
      margin-left: .426666667rem;
    }
    .container--item__Company{
      font-size: .4rem;
      margin-left: .28rem;
      color: #d9d9d9;
      padding-bottom: .333333333rem;
      margin-top: .29333rem;
    }
    .container--item__time{
      font-size: .4rem;
      margin-left: .28rem;
      color: #d9d9d9;
      padding-bottom: .333333333rem;
      margin-top: .29333rem;
    }
  }
</style>
